<!-- =========================================================================================
   地图首页
========================================================================================== -->

<!--
<template>
  <vx-card class="indexHome">
    <div class="content">
      <div id="container" class="map_box"></div>
      &lt;!&ndash; 边框阴影容器 &ndash;&gt;
      <div class="box-left"></div>
      <div class="box-top"></div>
      <div class="box-right"></div>
      <div class="box-bottom"></div>
      <div v-if="!isShowList" class="drawer" @click="() => (isShowList = true)">
        <img src="../../assets/images/homeMap/btn_open.png" alt="" />
      </div>
      &lt;!&ndash; 报警 alert &ndash;&gt;
      <div v-if="isShowWarning" class="warning-container">
        <div class="WCtitle">
          <p class="line-title">
            <img class="warnign-tip" src="../../assets/images/homeMap/www.png" alt="" />
            <span @click="() => (isShowWarning = false)">×</span>
          </p>
          &lt;!&ndash; 告警列表容器 &ndash;&gt;
          <div class="warningList-container">
            <p class="table-header">
              <span>设备名称</span>
              <span>设备编号</span>
              &lt;!&ndash; <span>监测类型</span> &ndash;&gt;
              <span>报警时间</span>
            </p>
            <p class="table-line" v-for="(item, key) in warningList" :key="key">
              <span>{{ item.stationName }}</span>
              <span>{{ item.code }}</span>
              &lt;!&ndash; <span>device_700</span> &ndash;&gt;
              <span>{{ item.alarmDate }}</span>
            </p>
          </div>
        </div>
      </div>

      &lt;!&ndash; 自定义大屏头部 &ndash;&gt;
      &lt;!&ndash;<div class="bigHeader">
        <div class="header-title">柳州市城市桥梁健康监测系统</div>
        &lt;!&ndash; 报警信息 &ndash;&gt;
        <div class="bigHeader-content">
          <div @click="() => (isShowWarning = true)" id="warning" :class="isShowWarning ? 'isShowWarning' : 'noShowWarning'">
            <img src="../../assets/images/homeMap/warning.png" alt="" />
          </div>
          <div class="person">
            <img :src="avatar" alt="" />
            <div @click="logout" class="logout">
              <span>退出登录</span>
            </div>
          </div>
          <span class="userName">{{ this.userInfo.realname }}</span>
          <div class="btn btn-bighome" @click="gotoBigHome">进入大屏</div>
          <div class="btn btn-system" @click="gotoSystem(1)">进入后台</div>
        </div>
      </div>&ndash;&gt;
      <div class="bigHeader" >
        <div class="map-header-front" style="padding-right: 6%" >
          <span style="font-weight: bold; color: #ffffff; font-size: 16px;margin-left: -5%">江苏南通&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<ElectronicClock /></span>
        </div>
        <div style="display: flex; font-weight: bold; color: #ffffff;padding-top: 5px;padding-left: 1%">
          <span v-if="templateType.includes('雨'||'雪')"><img style="width: 22px;height: 22px;margin-top: -5px" src="@/assets/images/icon/rain.ff805a6f.svg" /></span>
          <span v-else style="margin-top: -5px"><img src="@/assets/images/icon/weather.png" /></span>
          <span style="font-size: 16px;margin-top: -5px">&nbsp;&nbsp;&nbsp{{templateType}}&nbsp;&nbsp;&nbsp{{this.template}}℃ </span>
        </div>
        <div class="header-title" style="margin-top: -30px">
          南通城市桥梁健康监测系统
        </div>
        &lt;!&ndash; 报警信息 &ndash;&gt;
        <div class="bigHeader-content">
          <div
            @click="() => (isShowWarning = true)"
            id="warning"
            :class="isShowWarning ? 'isShowWarning' : 'noShowWarning'"
          >
            <img src="../../assets/images/homeMap/warning.png" alt="" />
          </div>
          <div class="person">
            <img :src="avatar" alt="" />
            <div @click="logout" class="logout">
              <span>退出登录</span>
            </div>
          </div>
          <span class="userName">{{ this.userInfo.realname }}</span>
          <div class="btn btn-bighome" @click="gotoBigHome">进入大屏</div>
          <div class="btn btn-system" @click="gotoSystem">进入后台</div>
        </div>
      </div>

      <div class="search_box">
        <el-input placeholder="请输入桥梁名称" v-model="search" icon="el-icon-search"></el-input>
        <div class="initBtn1" @click="searchBridegeName"></div>
        <div v-if="isShowList" class="initBtn" @click="() => (isShowList = false)">收起列表</div>
        &lt;!&ndash; 数据列表组件 &ndash;&gt;
        &lt;!&ndash; v-if="searchList.length > 0 && search" &ndash;&gt;
        <infoList ref="searchInfoList" v-if="isShowList" @setCenter="setCenter" :dataList="searchList"></infoList>
      </div>

      &lt;!&ndash; 图层切换 &ndash;&gt;
      <div class="views">
        &lt;!&ndash; 统计 &ndash;&gt;
        <div :class="['all', active == 1 ? 'active' : '']" class="all" @click="active = 1">
          <img src="../../assets/images/homeMap/tj.png" alt="" />
          <span>统计</span>
        </div>
        <div style="border-left: none" :class="['all', active == 2 ? 'active' : '']" @click="active = 2">
          <img src="../../assets/images/homeMap/jk.png" alt="" />
          <span>监控</span>
        </div>

        &lt;!&ndash; 卫星 &ndash;&gt;
        <div class="allType">
          &lt;!&ndash; <img src="../../assets/images/home/icon_weixin.png" alt="" />
          <span v-if="viewer == 0">卫星图</span>
          <span v-if="viewer == 1">2D图</span> &ndash;&gt;
        </div>
      </div>

      &lt;!&ndash; 统计图表 &ndash;&gt;
      <div class="allCharts" v-show="active == 1">
        &lt;!&ndash; <p class="title">
          <img src="../../assets/images/home/icon_all_sel.png" alt="" />
          <span>统计</span>
          <i @click="active = 0" class="close el-icon-close"></i>
        </p> &ndash;&gt;

        <el-row style="margin-top: 15px">
          <el-button :type="tab == 0 ? 'primary' : ''" @click="tab = 0">桥梁统计</el-button>
          <el-button :type="tab == 1 ? 'primary' : ''" @click="tab = 1">养护评定</el-button>
          <el-button :type="tab == 2 ? 'primary' : ''" @click="tab = 2">病害统计</el-button>
        </el-row>

        <div class="container-charts">
          <statistics v-show="tab == 0"></statistics>
          <assess v-show="tab == 1"></assess>
          <disease v-show="tab == 2"></disease>
        </div>
      </div>

      &lt;!&ndash; 监控 &ndash;&gt;
      <div class="allCharts" v-show="active == 2">
        &lt;!&ndash; <p class="title">
          <img src="../../assets/images/home/icon_all_sel.png" alt="" />
          <span>监控</span>
          <i @click="active = 0" class="close el-icon-close"></i>
        </p> &ndash;&gt;

        &lt;!&ndash; 请选择桥梁 &ndash;&gt;
        <div class="selectBridge">
          <el-select v-model="value" placeholder="请选择桥梁">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
          </el-select>
          <div v-if="unshow" id="id_test_video" style="width: 100%; height: auto"></div>
          <p class="fy">
            <el-pagination layout="prev, pager, next" page-size="1" hide-on-single-page @current-change="currentChange" :total="total"> </el-pagination>
          </p>
        </div>
      </div>
    </div>
  </vx-card>
</template>

<script>
  import ElectronicClock from "./ElectronicClock"
import infoList from './components/infoList'
import statistics from './components/all/statistics' // 桥梁统计
import assess from './components/all/assess' // 养护评定
import disease from './components/all/disease' // 病害统计
import base from '@/api/base' // 导入接口域名列表
export default {
  data() {
    return {
      warningList: [],
      isShowList: true,
      isShowWarning: false,
      drawer: false,
      size: 290,
      direction: 'ltr',
      unshow: true,
      search: '',
      viewer: 0,
      tab: 0,
      active: 1,
      mapLlist: [],
      searchList: [],
      markerAll: [],
      icon: require('../../assets/images/homeMap/icon(9).png'),
      source: 'http://116.8.3.148:38000/hls/jl2.m3u8',

      options: [],
      value: '',
      player: '',
      userInfo: '',
      avatar: '',
      total: 0,
      bridgeId: '',
    }
  },
  components: {
    infoList,
    statistics,
    assess,
    disease,
    ElectronicClock
  },
  mounted() {
    // 获取用户信息
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    // http://59.111.56.96:38084/msa-file/api/file/file/776453843796885504
    this.avatar = base.DOWNLOADURL + '/api/file/file/' + JSON.parse(this.userInfo.icon)[0].fileId

    this.getBridgeAll()
    //this.getWarningList()

    // this.player = new TcPlayer("id_test_video", {
    //   m3u8:
    //     "http://116.8.3.148:38000/hls/lt1.m3u8", //请替换成实际可用的播放地址
    //   autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    //   // poster: "http://www.test.com/myimage.jpg",
    //   width: "311", //视频的显示宽度，请尽量使用视频分辨率宽度
    //   height: "255", //视频的显示高度，请尽量使用视频分辨率高度
    //   controls: false,
    //   // live: true,
    //   x5_fullscreen: true
    // });
  },
  methods: {
    currentChange(i) {
      console.log(i)
      this.getVideo(this.bridgeId, i - 1)
    },
    // 获取视屏播放地址
    getVideo(id, i = 0) {
      this.$api.healthMonitor
        .getVideo({
          bridgeId: id,
        })
        .then((res) => {
          console.log('视屏播放地址', res.data.data)
          this.total = res.data.data.length
          if (res.data.data.length == 0) {
            document.getElementById('id_test_video').innerHTML = "<div class='vvv'></div>"
          } else {
            document.getElementById('id_test_video').innerHTML = ''
          }

          if (res.data.data[i]) {
            this.player = new TcPlayer('id_test_video', {
              m3u8: res.data.data[i].camera_url, //请替换成实际可用的播放地址
              autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
              // poster: "http://www.test.com/myimage.jpg",
              width: '300', //视频的显示宽度，请尽量使用视频分辨率宽度
              height: '255', //视频的显示高度，请尽量使用视频分辨率高度
              controls: false,
              // live: true,
              x5_fullscreen: true,
            })
          }
        })
    },

    // 退出登陆方法
    logout() {
      this.$api.login.logOut().then((res) => {
        this.$api.login.logOutDate().then((res) => {
          if (res.data.success) {
            this.$router.push('/pages/login')
            localStorage.removeItem('userInfo')
            localStorage.removeItem('token')
            localStorage.clear()
          }
        })
      })
    },
    gotoBigHome() {
      let viewData = JSON.parse(localStorage.getItem('viewData'))
      let list = viewData[0].viewConfigDTO.menuGroups[1].submenu
      if (list.length > 0) {
        var str = new RegExp('http')
        list.map((item, key) => {
          if (str.test(item.url)) {
            window.open(item.url)
          }
        })
      } else {
        this.$vs.notify({
          text: `暂无大屏可视化`,
          color: 'danger',
        })
      }
    },
    // 进入后台系统
    gotoSystem(id) {
      this.$router.push(`/bridgeInformation/bridgeManagement`)
      localStorage.setItem('index', id)
    },

    onchange() {
      this.drawer = true
    },
    // 天地图初始化
    initMap(lng, lat) {
      this.map = new T.Map('container')
      //设置显示地图的中心点和级别
      this.map.centerAndZoom(new T.LngLat(lng, lat), 12.5)
      //允许鼠标双击放大地图
      this.map.enableScrollWheelZoom()
      // checkResize()
      window.addEventListener('resize', () => {
        this.map.checkResize()
      })

      //创建地图图层对象
      let mapTypeSelect = [
        {
          title: '地图', //地图控件上所要显示的图层名称
          icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标（默认图标大小80x80）
          layer: window.TMAP_NORMAL_MAP, //地图类型对象，即MapType。
        },
        {
          title: '卫星',
          icon: ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',
          layer: window.TMAP_SATELLITE_MAP,
        },
        {
          title: '卫星混合',
          http: 'api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png',
          layer: window.TMAP_HYBRID_MAP,
        },
        {
          title: '地形',
          icon: ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png',
          layer: window.TMAP_TERRAIN_MAP,
        },
        {
          title: '地形混合',
          icon: ' http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png',
          layer: window.TMAP_TERRAIN_HYBRID_MAP,
        },
      ]
      var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }) // 初始化地图类型选择控件

      // this.map.addControl(ctrl); //添加地图选择控件

      this.map.setMapType(window.TMAP_HYBRID_MAP) // 设置地图位地星混合图层
    },

    // 获取所有桥梁
    getBridgeAll() {
      this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
        console.log('所有桥梁', res.data.data)
        this.mapList = res.data.data[0]

        this.searchList = res.data.data[0]
        this.options = res.data.data[0]
        this.value = this.options[0].id
        // 获取有病害的桥梁5.13注释
        // 初始化地图
        this.initMap(109.41544, 24.353643)

        // 初始化地图上的点
        this.mapList.map((item, key) => {
          console.log('0', item)
          if (!item.disease) {
            this.icon = require('../../assets/images/homeMap/icon(9).png')
            this.markerAll.push(this.initMarker(item.lng, item.lat, this.icon, item.name, item))
          } else {
            this.icon = require('../../assets/images/homeMap/icon(8).png')
            this.markerAll.push(this.initMarkerD(item.lng, item.lat, this.icon, item.name, item))
          }
        })
      /*  this.$api.mearsuringPointSetting.getDiseaseBridge().then((res) => {
          console.log('有病害的桥梁', res.data.data)
          let data = res.data.data
          if (this.mapList.length > 0) {
            this.mapList.map((item, key) => {
              if (data.length > 0) {
                data.map((i, index) => {
                  if (item.id === i.name) {
                    item.disease = true
                  }
                })
              }
            })
          }

          // 初始化地图
          this.initMap(109.41544, 24.353643)

          // 初始化地图上的点
          this.mapList.map((item, key) => {
            console.log('0', item)
            if (!item.disease) {
              this.icon = require('../../assets/images/homeMap/icon(9).png')
              this.markerAll.push(this.initMarker(item.lng, item.lat, this.icon, item.name, item))
            } else {
              this.icon = require('../../assets/images/homeMap/icon(8).png')
              this.markerAll.push(this.initMarkerD(item.lng, item.lat, this.icon, item.name, item))
            }
          })
        })*/
      })
    },
    // 获取最新的告警列表，5.13注释的
   /* getWarningList() {
      this.$api.mearsuringPointSetting.getWarnignList().then((res) => {
        console.log('10条告警列表', res.data.data)
        this.warningList = res.data.data
      })
    },*/

    initMarker(lng, lat, icon, name, item) {
      var icon = new T.Icon({
        iconUrl: icon,
        iconSize: new T.Point(116 / 2.5, 129 / 2.5),
        iconAnchor: new T.Point(30, 50),
      })
      const marker = new T.Marker(new T.LngLat(lng, lat), { icon: icon })
      marker.data = item

      this.map.addOverLay(marker)

      const label = new T.Label({
        text: `
         <div class='TLabel'>
           <p class='TLable-top'><span class='roadType'></span><span class='typeName'>${item.standardName.substring(0, item.standardName.length - 2)}</span></p>
           <p class='TLabel-name'>${name}</p>
         </div>
        `,
        position: marker.getLngLat(),
        offset: new T.Point(3, -30),
      })
      this.map.addOverLay(label)
      marker.addEventListener('click', (e) => {
        console.log(e.target.data)
        let data = e.target.data.id

        let view = JSON.parse(localStorage.getItem('viewData'))
        console.log('view:', view)
        view.map((item, key) => {
          if (item.deptResponses[0].code == data) {
            localStorage.setItem('viewIndex', key)
            localStorage.setItem('ownInfo', JSON.stringify(item.deptResponses))
            localStorage.setItem('ownId', item.deptResponses[0].code)
          }
        })
        localStorage.setItem('mapClick', 0)
        this.$router.push('/healthMonitor/RealMonitor')
      })
    },
    initMarkerD(lng, lat, icon, name, item) {
      var icon = new T.Icon({
        iconUrl: icon,
        iconSize: new T.Point(116 / 2.5, 129 / 2.5),
        iconAnchor: new T.Point(30, 50),
      })
      const marker = new T.Marker(new T.LngLat(lng, lat), { icon: icon })
      marker.data = item

      this.map.addOverLay(marker)

      const label = new T.Label({
        text: `
         <div class='TLabel_D'>
           <p class='TLable-top_D'><span class='roadType_D'></span><span class='typeName_D'>${item.standardName.substring(0, item.standardName.length - 2)}</span></p>
           <p class='TLabel-name_D'>${name}</p>
         </div>
        `,
        position: marker.getLngLat(),
        offset: new T.Point(3, -30),
      })
      this.map.addOverLay(label)
      marker.addEventListener('click', (e) => {
        console.log(e.target.data)
        let data = e.target.data.id

        let view = JSON.parse(localStorage.getItem('viewData'))
        view.map((item, key) => {
          if (item.deptResponses[0].code == data) {
            localStorage.setItem('viewIndex', key)
            localStorage.setItem('ownInfo', JSON.stringify(item.deptResponses))
            localStorage.setItem('ownId', item.deptResponses[0].code)
          }
        })
        localStorage.setItem('mapClick', 0)
        // alert(12132)
        this.$router.push('/healthMonitor/RealMonitor')
      })
    },

    // 初始化 marker 点
    /**
     * lng : 经度
     * lat : 纬度
     * icon : 图标
     * content : 点名称
     * info : 自定义信息
     */
    // initMarker(lng, lat, icon, content, info) {
    //   var marker = new AMap.Marker({
    //     position: new AMap.LngLat(lng, lat),
    //     offset: new AMap.Pixel(-10, -10),
    //     icon: icon, // 添加 Icon 图标 URL
    //     label: {
    //       content: content,
    //       direction: "bottom",
    //     },
    //     data: info,
    //     anchor: "top-center",
    //   });
    //   marker.on("click",()=>{
    //     this.$router.push("/bridgeInformation/bridgeManagement")
    //   })
    //   // marker.data = info;
    //   // marker.on("click", e => {
    //   //   this.popupActivo = true;
    //   //   console.log("点击事件", e.target.data);
    //   //   let data = e.target.data;
    //   //   this.obj = {
    //   //     id: data.id,
    //   //     picId: data.picId,
    //   //     name: data.name,
    //   //     builtArea: data.builtArea,
    //   //     startDate: data.startDate,
    //   //     engineeringCost: data.engineeringCost,
    //   //     endDate: data.endDate,
    //   //     contractDuration: data.contractDuration,
    //   //     lng: data.lng,
    //   //     lat: data.lat,
    //   //     builder: data.builder,
    //   //     builderMgr: data.builderMgr,
    //   //     describe: data.describe
    //   //   };
    //   // });
    //   return marker;
    // },

    // setZoom
    setCenter(lng, lat, id) {
      this.value = id
      // this.map.setCenter([lng, lat]); //设置地图中心点
      this.map.centerAndZoom(new T.LngLat(lng, lat), 12.5)
    },
    // YU  修复BUG
    searchBridegeName() {
      // if(!this.isShowList) {
      //   console.log('wowowoowowowo')
      // }
      this.$refs.searchInfoList.detailsShow()
    },
  },
  watch: {
    search: {
      handler: function (val) {
        if (val) {
          console.log(val)
          let arr = []
          this.mapList.map((item, key) => {
            if (item.name.indexOf(val) >= 0) {
              arr.push(item)
            }
          })
          console.log('didiid', arr)
          this.searchList = arr
        } else {
          this.getBridgeAll()
        }
      },
    },
    $route: {
      handler(val, oldVal) {
        if (val.path !== '/') {
          this.drawer = false
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
    value: {
      handler(val) {
        this.bridgeId = val
        this.getVideo(val)
      },
      deep: true,
      // immediate: true
    },
  },
  beforeDestroy() {
    // Vue.delete(this.value)//删除了age属性
    this.player.destroy()
  },
}
</script>

<style lang="scss" scoped>
/deep/.el-pager li {
  background: transparent !important;
}
/deep/.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: transparent !important;
}
/deep/.el-pagination button:disabled {
  background-color: transparent !important;
}
/deep/.el-pagination .btn-prev {
  background: transparent !important;
}
.fy {
  text-align: center;
  margin-top: 5px;
}

// 阴影容器
.box-left {
  position: fixed;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  box-shadow: 10px 0px 180px 250px rgba(12, 23, 31, 8) !important;
  z-index: 9999 !important;
}

.box-top {
  position: fixed;
  top: -10px;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 110px 160px rgba(12, 23, 31, 8) !important;
  z-index: 9999 !important;
}

.box-right {
  position: fixed;
  right: -10px;
  top: 0;
  width: 10px;
  height: 100%;
  box-shadow: 0px 10px 180px 250px rgba(12, 23, 31, 8) !important;
  z-index: 9999 !important;
}

.box-bottom {
  position: fixed;
  bottom: -10px;
  width: 100%;
  height: 10px;
  box-shadow: 0px 10px 110px 160px rgba(12, 23, 31, 8) !important;
  z-index: 9999 !important;
}

.bigHeader {
  width: 100%;
  height: 90px;
  background: url('../../assets/images/homeMap/header1.png') no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  z-index: 9999 !important;
  text-align: center;
  // position: relative;
  .bigHeader-content {
    width: 360px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: start;
    padding-top: 20px;
    box-sizing: border-box;
    cursor: pointer;
    #warning {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      // background: #244257;
      margin-right: 15px;
      text-align: center;
      img {
        width: 50%;
        margin-top: 9px;
        margin-left: 9px;
      }
    }
    .isShowWarning {
      background: #03b3ed;
    }
    .noShowWarning {
      background: #244257;
    }
    .person {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #244257;
      text-align: center;
      z-index: 99999 !important;
      img {
        width: 100%;
        border-radius: 50%;
        // margin-top: 6px;
        // margin-left: 9px;
      }
      .logout {
        width: 78px;
        height: 38;
        text-align: center;
        color: #d4e4f6;
        display: none;
      }
    }

    .person:hover {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #244257;
      text-align: center;
      img {
        width: 100%;
        border-radius: 50%;
      }
      .logout {
        width: 78px;
        height: 68px;
        text-align: center;
        color: #d4e4f6;
        display: block;
        line-height: 30px;
        padding-top: 8px;
        z-index: 99999 !important;
        position: fixed;
        span {
          display: inline-block;
          width: 100%;
          height: 38px;
          background: #04598a;
          border: 1px solid #2082b1;
          margin-top: 10px;
          line-height: 38px;
          z-index: 99999 !important;
        }
      }

      .logout:before {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: 3px;
        left: 8px;
        padding: 0;
        border-bottom: 8px solid #1f86b7;
        border-top: 8px solid transparent;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        display: block;
        content: '';
      }
      .logout:after {
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: 3px;
        left: 7px;
        padding: 0;
        border-bottom: 9px solid #04598a;
        border-top: 9px solid transparent;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        display: block;
        content: '';
      }
    }

    .userName {
      line-height: 35px;
      margin-left: 10px;
      color: #8caec3;
      white-space: nowrap;
    }
    .btn {
      width: 78px;
      height: 30px;
      border: 1px solid #388dbc;
      background: #26506a;
      margin-left: 12px;
      margin-top: 3px;
      color: #8caec3;
      text-align: center;
      line-height: 30px;
    }
    .btn-bighome {
      margin-left: 18px;
    }
    .btn-bighome:hover {
      color: #fff;
      margin-left: 18px;
    }
    .btn-system:hover {
      color: #fff;
    }
  }
}

/deep/.vx-card__body {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}
.content {
  position: relative;
  .map_box {
    width: 100%;
    height: 100vh;
    background: white;
    // margin-top: 20px;
  }
  .search_box {
    width: 280px;
    // height: 364px;
    // background: white;
    position: absolute;
    top: 90px;
    left: 10px;
    z-index: 9999 !important;
    background: url('../../assets/images/homeMap/search.png') no-repeat;
    background-size: 100% auto;
    cursor: pointer;
    .initBtn1 {
      width: 43.5px;
      height: 28px;
      position: relative;
      left: 236px;
      top: -30px;
      cursor: pointer;
      opacity: 0.1;
    }
    .initBtn {
      width: 78px;
      height: 28px;
      border: 1px solid #2286b5;
      text-align: center;
      line-height: 28px;
      margin-top: 20px;
      margin-bottom: 8px;
      position: relative;
      left: 200px;
      color: #c7dcf5;
      cursor: pointer;
    }
  }
  /deep/.el-input__inner {
    border-radius: 0px;
    // margin-bottom: 4px;
  }
  /deep/.el-input__icon {
    font-size: 18px;
  }
}
.indexHome {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0;
  z-index: 51002 !important;
}
/deep/.amap-maptype-win {
  background: transparent !important;
  border: none !important;
  img {
    display: none !important;
  }
}
/deep/.amap-maptype-con {
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  background-color: transparent !important;
  img {
    width: 100% !important;
    height: 100% !important;
  }
}
/deep/.amap-maptype-title:hover {
  background-color: #fff !important;
  color: #327bdc !important;
}
/deep/.amap-maptype-title {
  position: absolute !important;
  bottom: -8px !important;
  left: -46px !important;
  color: #858899 !important;
  font-size: 14px !important;
}
/deep/.amap-maptype-list {
  display: none !important;
}
.views {
  position: fixed;
  right: 30px;
  top: 110px;
  height: 30px;
  display: flex;
  justify-content: start;
  line-height: 30px;
  z-index: 9999 !important;
  .all {
    cursor: pointer;
    width: 78px;
    height: 100%;
    background: rgba(39, 59, 76, 0.8);
    color: #e1eeff;
    border: 1px solid #105e8b;
    text-align: center;
    img {
      display: inline;
      vertical-align: middle;
      width: 16px;
      margin-right: 5px;
      margin-left: 5px;
    }
  }

  .allType {
    cursor: pointer;
    width: 120px;
    height: 100%;
    background: transparent;
    // color: #fff;
    // text-align: center;
    padding: 0 15px;
    img {
      display: inline;
      vertical-align: middle;
    }
  }
  .allType:hover {
    color: #327bdc;
  }
}
.allCharts {
  position: fixed;
  right: 0px;
  top: 160px;
  background: rgba(0, 0, 0, 0.2);
  width: 305px;
  height: auto;
  // min-height: 400px;
  max-height: calc(100vh - 170px);
  padding: 0 10px;
  z-index: 9999 !important;
  .title {
    width: 100%;
    border-bottom: 1px solid #eaebec;
    line-height: 40px;
    color: #4a8be0;
    img {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -2px;
      left: -5px;
    }
    span {
      position: relative;
      left: -3px;
    }
  }
}
.close {
  float: right;
  margin-top: 14px;
  cursor: pointer;
}
.container-charts {
  width: 100%;
  max-height: calc(100vh - 270px);
  overflow-x: hidden;
}
.active {
  background: linear-gradient(0deg, #0376b4 0%, #005089 100%) !important;
}
.selectBridge {
  margin-top: 20px;
}
#id_test_video {
  margin-top: 20px;
}

/deep/.el-input__inner {
  background: rgba(255, 255, 255, 0) !important;
  border: none !important;
  color: #dcddde;
}
/deep/input::-webkit-input-placeholder {
  color: #858899;
}
/deep/input::-moz-input-placeholder {
  color: #858899;
}
/deep/input::-ms-input-placeholder {
  color: #858899;
}

.drawer {
  width: 6px;
  background: #165264;
  position: fixed;
  left: 15px;
  z-index: 9999 !important;
  margin-top: 200px;
  height: calc(100vh - 300px);
  img {
    margin-top: calc((100vh - 330px) / 2);
    margin-left: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
}
/deep/.el-button {
  background: rgba(255, 255, 255, 0);
  border: 1px solid rgba(220, 223, 230, 0);
  color: rgba(195, 222, 255, 1);
}
/deep/.el-button&#45;&#45;primary {
  background: linear-gradient(0deg, #0376b4 0%, #005089 100%);
  opacity: 0.76;
  color: rgba(195, 222, 255, 1);
}

.warning-container {
  width: 400px;
  height: 135px;
  overflow: auto;
  border: 1px solid #5b9abb;
  background: linear-gradient(0deg, #0c5377 0%, #0b354a 100%);
  opacity: 0.76;
  position: fixed;
  z-index: 50008;
  right: 156px;
  top: 74px;
  .WCtitle {
    width: 100%;
    height: 42px;
    border-bottom: 1px solid #1f4655;
  }
  .line-title {
    display: flex;
    justify-content: space-between;
    padding: 5px 5px;
    span {
      color: #fff;
      font-size: 26px;
      position: relative;
      top: -10px;
      cursor: pointer;
    }
    .warnign-tip {
      height: 26px;
    }
  }
}

.table-header {
  display: flex;
  padding: 0 10px;
  color: #b8dbf2;
  font-size: 12px;
  span {
    flex: 1;
    transform: scale(0.9);
  }
}
.table-line {
  display: flex;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
  span {
    transform: scale(0.85);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>

<style>
.TLabel_D {
  color: #fff;
}
.TLable-top_D {
  border-bottom: 1px solid rgba(161, 202, 253, 0.3);
  padding: 0;
  height: 24px;
}
.TLabel-name_D {
  text-align: center;
  position: relative;
  top: -5px;
  font-weight: bold !important;
  color: #ffffff;

  background: linear-gradient(0deg, #ff0000 0%, #ffffff 80.8349609375%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.roadType_D {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../../assets/images/homeMap/城市地址.png') no-repeat center;
  background-size: 100%;
}
.typeName_D {
  position: relative;
  top: -3px;
  margin-left: 3px;
  font-size: 12px;
}

.TLabel {
  color: #fff;
}
.TLable-top {
  border-bottom: 1px solid rgba(161, 202, 253, 0.3);
  padding: 0;
  height: 24px;
}
.TLabel-name {
  text-align: center;
  position: relative;
  top: -5px;
  font-weight: bold !important;
  color: #ffffff;
  background: linear-gradient(0deg, #0075af 0%, #d8f1fd 65.7958984375%, #d8f1fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.roadType {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url('../../assets/images/homeMap/roadType.png') no-repeat center;
  background-size: 100%;
}
.typeName {
  position: relative;
  top: -3px;
  margin-left: 3px;
  font-size: 12px;
}
.tdt-label {
  width: 84px;
  height: 45px;
  background: rgba(7, 20, 28, 0.8);
  border-radius: 3px;
  border: none;
}

.warningList-container {
  width: 100%;
  height: 95px;
  position: relative;
  top: -18px;
  overflow: auto;
}

/* 覆盖滚动条样式 css */
.warningList-container::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
.warningList-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.warningList-container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

/* 覆盖滚动条样式 css */
::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.vvv {
  width: 311px;
  height: 255px;
  background: #000;
}
.header-title {
  font-size: 24px;
  margin-top: 15px;
  letter-spacing: 2px;
  background: linear-gradient(0deg, #0075af 0%, #d8f1fd 65.7958984375%, #d8f1fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.fy {
  text-align: center;
}
</style>
-->
<template>
  <vx-card class="indexHome">
    <div class="content">
      <div id="container" class="map_box"></div>
      <!-- 边框阴影容器 -->
      <div class="box-left"></div>
      <div class="box-top"></div>
      <div class="box-right"></div>
      <!--<div class="box-bottom"></div>-->
      <div v-if="!isShowList" class="drawer" @click="() => (isShowList = true)">
        <img src="../../assets/images/homeMap/btn_open.png" alt="" />
      </div>
      <!-- 报警 alert -->
      <div v-if="isShowWarning" class="warning-container">
        <div class="WCtitle">
          <p class="line-title">
            <img
              class="warnign-tip"
              src="../../assets/images/homeMap/www.png"
              alt=""
            />
            <span @click="() => (isShowWarning = false)">×</span>
          </p>
          <!-- 告警列表容器 -->
          <div class="warningList-container">
            <p class="table-header">
              <span>设备名称</span>
              <span>设备编号</span>
              <!-- <span>监测类型</span> -->
              <span>报警时间</span>
            </p>
            <p class="table-line" v-for="(item,key) in warningList" :key="key">
              <span>{{item.stationName}}</span>
              <span>{{item.code}}</span>
              <!-- <span>device_700</span> -->
              <span>{{item.alarmDate}}</span>
            </p>
          </div>
        </div>
      </div>

      <!-- 自定义大屏头部 -->
      <div class="bigHeader" >
        <div class="map-header-front" style="padding-right: 6%" >
          <span style="font-weight: bold; color: #ffffff; font-size: 16px;margin-left: -5%">江苏南通&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp<ElectronicClock /></span>
        </div>
        <div style="display: flex; font-weight: bold; color: #ffffff;padding-top: 5px;padding-left: 1%">
          <span v-if="templateType.includes('雨'||'雪')"><img style="width: 22px;height: 22px;margin-top: -5px" src="@/assets/images/icon/rain.ff805a6f.svg" /></span>
          <span v-else style="margin-top: -5px"><img src="@/assets/images/icon/weather.png" /></span>
          <span style="font-size: 16px;margin-top: -5px">&nbsp;&nbsp;&nbsp{{templateType}}&nbsp;&nbsp;&nbsp{{this.template}}℃ </span>
        </div>
        <div class="header-title" style="margin-top: -30px">
          南通城市桥梁健康监测系统
        </div>
        <!-- 报警信息 -->
        <div class="bigHeader-content">
          <div
            @click="() => (isShowWarning = true)"
            id="warning"
            :class="isShowWarning ? 'isShowWarning' : 'noShowWarning'"
          >
            <img src="../../assets/images/homeMap/warning.png" alt="" />
          </div>
          <div class="person">
            <img :src="avatar" alt="" />
            <div @click="logout" class="logout">
              <span>退出登录</span>
            </div>
          </div>
          <span class="userName">{{ this.userInfo.realname }}</span>
          <div class="btn btn-bighome" @click="gotoBigHome">进入大屏</div>
          <div class="btn btn-system" @click="gotoSystem">进入后台</div>
        </div>
      </div>

      <div class="search_box">
        <el-input placeholder="请输入桥梁名称" v-model="search"> </el-input>

        <div
          v-if="isShowList"
          class="initBtn"
          @click="() => (isShowList = false)"
        >
          收起列表
        </div>
        <!-- 数据列表组件 -->
        <!-- v-if="searchList.length > 0 && search" -->
        <infoList
          v-if="isShowList"
          @setCenter="setCenter"
          :dataList="searchList"
        ></infoList>
      </div>

      <!-- 图层切换 -->
      <div class="views">
        <!-- 统计 -->
        <div
          :class="['all', active == 1 ? 'active' : '']"
          class="all"
          @click="active = 1"
        >
          <img src="../../assets/images/homeMap/tj.png" alt="" />
          <span>统计</span>
        </div>
        <div
          style="border-left: none"
          :class="['all', active == 2 ? 'active' : '']"
          @click="active = 2"
        >
          <img src="../../assets/images/homeMap/jk.png" alt="" />
          <span>监控</span>
        </div>

        <!-- 卫星 -->
        <div class="allType">
          <!-- <img src="../../assets/images/home/icon_weixin.png" alt="" />
          <span v-if="viewer == 0">卫星图</span>
          <span v-if="viewer == 1">2D图</span> -->
        </div>
      </div>

      <!-- 统计图表 -->
      <div class="allCharts" v-show="active == 1">
        <!-- <p class="title">
          <img src="../../assets/images/home/icon_all_sel.png" alt="" />
          <span>统计</span>
          <i @click="active = 0" class="close el-icon-close"></i>
        </p> -->

        <el-row style="margin-top: 15px">
          <el-button :type="tab == 0 ? 'primary' : ''" @click="tab = 0"
          >桥梁统计</el-button
          >
          <el-button :type="tab == 1 ? 'primary' : ''" @click="tab = 1"
          >养护评定</el-button
          >
          <el-button :type="tab == 2 ? 'primary' : ''" @click="tab = 2"
          >病害统计</el-button
          >
        </el-row>

        <div class="container-charts">
          <statistics v-show="tab == 0"></statistics>
          <assess v-show="tab == 1"></assess>
          <disease v-show="tab == 2"></disease>
        </div>
      </div>

      <!-- 监控 -->
      <div class="allCharts" v-show="active == 2">
        <!-- <p class="title">
          <img src="../../assets/images/home/icon_all_sel.png" alt="" />
          <span>监控</span>
          <i @click="active = 0" class="close el-icon-close"></i>
        </p> -->

        <!-- 请选择桥梁 -->
        <div class="selectBridge">
          <el-select v-model="value" placeholder="请选择桥梁">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <div
            v-if="unshow"
            id="id_test_video"
            style="width: 100%; height: auto"
          ></div>
          <p class="fy">
            <el-pagination
              layout="prev, pager, next"
              page-size="1"
              hide-on-single-page
              @current-change='currentChange'
              :total="total">
            </el-pagination>
          </p>
        </div>
      </div>
    </div>
  </vx-card>
</template>

<script>
  import ElectronicClock from "./ElectronicClock"
  import infoList from "./components/infoList";
  import statistics from "./components/all/statistics"; // 桥梁统计
  import axios from "../../http/axios";
  import assess from "./components/all/assess"; // 养护评定
  import disease from "./components/all/disease"; // 病害统计
  import base from "@/api/base"; // 导入接口域名列表
  export default {
    data() {
      return {
        template:0,
        templateType:'',
        warningList:[],
        isShowList: true,
        isShowWarning: false,
        drawer: false,
        size: 290,
        direction: "ltr",
        unshow: true,
        search: "",
        viewer: 0,
        tab: 0,
        active: 1,
        mapLlist: [],
        searchList: [],
        markerAll: [],
        icon: require("../../assets/images/homeMap/icon(9).png"),
        source:
          "http://116.8.3.148:38000/hls/jl2.m3u8",

        options: [],
        value: "",
        player: "",
        userInfo: "",
        avatar: "",
        total: 0,
        bridgeId:''
      };
    },
    components: {
      infoList,
      statistics,
      assess,
      disease,
      ElectronicClock
    },
    mounted() {
      // 获取用户信息
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      // http://59.111.56.96:38084/msa-file/api/file/file/776453843796885504
      this.avatar =
        base.DOWNLOADURL +
        "/api/file/file/" +
        JSON.parse(this.userInfo.icon)[0].fileId;

      this.getBridgeAll();
      //this.getTemplate();


      /* this.$api.template.getTemlate.then(response =>{
         console.log(123456,response);
         /!*if (response.data.success) {

         }*!/
       })*/
      let _this= this
      axios
        .get("http://wthrcdn.etouch.cn/weather_mini?city=南通")
        .then(function(response) {
          console.log("想要的温度",response.data.data);
          //console.log('this.template',_this.template);
          _this.templateType = response.data.data.forecast[0].type
          _this.template= Number(response.data.data.wendu)
          //console.log("想要的温度",_this.template);
        })
        .catch(function(error) {
          console.log('this.wendu',error);
          _this.templateType = error.data.data.forecast[0].type
          _this.template= Number(error.data.data.wendu)
        });


      // this.player = new TcPlayer("id_test_video", {
      //   m3u8:
      //     "http://116.8.3.148:38000/hls/lt1.m3u8", //请替换成实际可用的播放地址
      //   autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
      //   // poster: "http://www.test.com/myimage.jpg",
      //   width: "311", //视频的显示宽度，请尽量使用视频分辨率宽度
      //   height: "255", //视频的显示高度，请尽量使用视频分辨率高度
      //   controls: false,
      //   // live: true,
      //   x5_fullscreen: true
      // });
    },
    methods: {
      currentChange(i){
        console.log(i);
        this.getVideo(this.bridgeId, i-1)
      },
      // 获取视屏播放地址
      getVideo(id, i=0){
        this.$api.healthMonitor.getVideo({
          bridgeId: id
        }).then((res)=>{
          console.log("视屏播放地址", res.data.data);
          this.total = res.data.data.length;
          if(res.data.data.length == 0){
            document.getElementById("id_test_video").innerHTML = "<div class='vvv'></div>";
          }else{
            document.getElementById("id_test_video").innerHTML = "";
          }

          if(res.data.data[i]){
            this.player = new TcPlayer("id_test_video", {
              m3u8: res.data.data[i].camera_url, //请替换成实际可用的播放地址
              autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
              // poster: "http://www.test.com/myimage.jpg",
              width: "300", //视频的显示宽度，请尽量使用视频分辨率宽度
              height: "255", //视频的显示高度，请尽量使用视频分辨率高度
              controls: false,
              // live: true,
              x5_fullscreen: true
            });
          }
        })
      },

      // 退出登陆方法
      logout() {
        this.$api.login.logOut().then(res => {
          this.$api.login.logOutDate().then(res => {
            if (res.data.success) {
              this.$router.push("/pages/login");
              localStorage.removeItem("userInfo");
              localStorage.removeItem("token");
              localStorage.clear();
            }
          });
        });
      },
      gotoBigHome() {
        let viewData = JSON.parse(localStorage.getItem("viewData"));
        let list = viewData[0].viewConfigDTO.menuGroups[1].submenu;
        if (list.length > 0) {
          var str = new RegExp("http");
          list.map((item, key) => {
            if (str.test(item.url)) {
              window.open(item.url);
            }
          });
        } else {
          this.$vs.notify({
            text: `暂无大屏可视化`,
            color: "danger"
          });
        }
      },
      // 进入后台系统
      gotoSystem() {
        this.$router.push("/healthMonitor/RealMonitor");
      },

      onchange() {
        this.drawer = true;
      },
      // 天地图初始化
      initMap(lng, lat) {
        this.map = new T.Map("container");
        //设置显示地图的中心点和级别
        this.map.centerAndZoom(new T.LngLat(lng, lat), 12.5);
        //允许鼠标双击放大地图
        this.map.enableScrollWheelZoom();
        // checkResize()
        window.addEventListener("resize", () => {
          this.map.checkResize();
        });

        //创建地图图层对象
        let mapTypeSelect = [
          {
            title: "地图", //地图控件上所要显示的图层名称
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: window.TMAP_NORMAL_MAP //地图类型对象，即MapType。
          },
          {
            title: "卫星",
            icon:
              " http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png",
            layer: window.TMAP_SATELLITE_MAP
          },
          {
            title: "卫星混合",
            http: "api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
            layer: window.TMAP_HYBRID_MAP
          },
          {
            title: "地形",
            icon:
              " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrain.png",
            layer: window.TMAP_TERRAIN_MAP
          },
          {
            title: "地形混合",
            icon:
              " http://api.tianditu.gov.cn/v4.0/image/map/maptype/terrainpoi.png",
            layer: window.TMAP_TERRAIN_HYBRID_MAP
          }
        ];
        var ctrl = new T.Control.MapType({ mapTypes: mapTypeSelect }); // 初始化地图类型选择控件

        // this.map.addControl(ctrl); //添加地图选择控件

        this.map.setMapType(window.TMAP_NORMAL_MAP); // 设置地图位地星混合图层
      },

      // 获取所有桥梁
      getBridgeAll() {
        this.$api.mearsuringPointSetting.getBridgeAll().then(res => {
          console.log("所有桥梁", res.data.data);
          this.mapList = res.data.data[0];

          this.searchList = res.data.data[0];
          this.options = res.data.data[0];
          this.value = this.options[0].id;
          // 初始化地图
          /*this.initMap(120.826, 32.02);*/
          this.initMap(120.836628, 32.01985);

          // 初始化地图上的点
          this.mapList.map((item, key) => {
            console.log("0", item);
            if (!item.disease) {
              this.icon = require("../../assets/images/homeMap/icon(9).png");
              this.markerAll.push(
                this.initMarker(item.lng, item.lat, this.icon, item.name, item)
              );
            } else {
              this.icon = require("../../assets/images/homeMap/icon(8).png");
              this.markerAll.push(
                this.initMarkerD(item.lng, item.lat, this.icon, item.name, item)
              );
            }
          });
          // 获取有病害的桥梁
          /* this.$api.mearsuringPointSetting.getDiseaseBridge().then(res => {
             console.log("有病害的桥梁", res.data.data);
             let data = res.data.data;
             if (this.mapList.length > 0) {
               this.mapList.map((item, key) => {
                 if (data.length > 0) {
                   data.map((i, index) => {
                     if (item.id === i.name) {
                       item.disease = true;
                     }
                   });
                 }
               });
             }


           });*/
        });
      },
      // 获取最新的告警列表
      /*getWarningList() {
        this.$api.mearsuringPointSetting.getWarnignList().then(res => {
          console.log("10条告警列表", res.data.data);
          this.warningList = res.data.data;

        });
      },*/

      initMarker(lng, lat, icon, name, item) {
        var icon = new T.Icon({
          iconUrl: icon,
          iconSize: new T.Point(116 / 2.5, 129 / 2.5),
          iconAnchor: new T.Point(30, 50)
        });
        const marker = new T.Marker(new T.LngLat(lng, lat), { icon: icon });
        marker.data = item;

        this.map.addOverLay(marker);

        const label = new T.Label({
          text: `
         <div class='TLabel'>
           <p class='TLable-top'><span class='roadType'></span><span class='typeName'>${item.standardName.substring(
            0,
            item.standardName.length - 2
          )}</span></p>
           <p class='TLabel-name'>${name}</p>
         </div>
        `,
          position: marker.getLngLat(),
          offset: new T.Point(3, -30)
        });
        this.map.addOverLay(label);
        marker.addEventListener("click", e => {
          console.log(e.target.data);
          let data = e.target.data.id;

          let view = JSON.parse(localStorage.getItem("viewData"));
          console.log("view:",view)
          view.map((item, key) => {
            if (item.deptResponses[0].code == data) {
              localStorage.setItem("viewIndex", key);
              localStorage.setItem("ownInfo", JSON.stringify(item.deptResponses));
              localStorage.setItem("ownId", item.deptResponses[0].code);
            }
          });
          localStorage.setItem("mapClick",0)
          this.$router.push("/healthMonitor/RealMonitor");

        });
      },
      initMarkerD(lng, lat, icon, name, item) {
        var icon = new T.Icon({
          iconUrl: icon,
          iconSize: new T.Point(116 / 2.5, 129 / 2.5),
          iconAnchor: new T.Point(30, 50)
        });
        const marker = new T.Marker(new T.LngLat(lng, lat), { icon: icon });
        marker.data = item;

        this.map.addOverLay(marker);

        const label = new T.Label({
          text: `
         <div class='TLabel_D'>
           <p class='TLable-top_D'><span class='roadType_D'></span><span class='typeName_D'>${item.standardName.substring(
            0,
            item.standardName.length - 2
          )}</span></p>
           <p class='TLabel-name_D'>${name}</p>
         </div>
        `,
          position: marker.getLngLat(),
          offset: new T.Point(3, -30)
        });
        this.map.addOverLay(label);
        marker.addEventListener("click", e => {
          console.log(e.target.data);
          let data = e.target.data.id;

          let view = JSON.parse(localStorage.getItem("viewData"));
          view.map((item, key) => {
            if (item.deptResponses[0].code == data) {
              localStorage.setItem("viewIndex", key);
              localStorage.setItem("ownInfo", JSON.stringify(item.deptResponses));
              localStorage.setItem("ownId", item.deptResponses[0].code);
            }
          });
          localStorage.setItem("mapClick",0)
          // alert(12132)
          this.$router.push("/healthMonitor/RealMonitor");
        });
      },

      // 初始化 marker 点
      /**
       * lng : 经度
       * lat : 纬度
       * icon : 图标
       * content : 点名称
       * info : 自定义信息
       */
      // initMarker(lng, lat, icon, content, info) {
      //   var marker = new AMap.Marker({
      //     position: new AMap.LngLat(lng, lat),
      //     offset: new AMap.Pixel(-10, -10),
      //     icon: icon, // 添加 Icon 图标 URL
      //     label: {
      //       content: content,
      //       direction: "bottom",
      //     },
      //     data: info,
      //     anchor: "top-center",
      //   });
      //   marker.on("click",()=>{
      //     this.$router.push("/bridgeInformation/bridgeManagement")
      //   })
      //   // marker.data = info;
      //   // marker.on("click", e => {
      //   //   this.popupActivo = true;
      //   //   console.log("点击事件", e.target.data);
      //   //   let data = e.target.data;
      //   //   this.obj = {
      //   //     id: data.id,
      //   //     picId: data.picId,
      //   //     name: data.name,
      //   //     builtArea: data.builtArea,
      //   //     startDate: data.startDate,
      //   //     engineeringCost: data.engineeringCost,
      //   //     endDate: data.endDate,
      //   //     contractDuration: data.contractDuration,
      //   //     lng: data.lng,
      //   //     lat: data.lat,
      //   //     builder: data.builder,
      //   //     builderMgr: data.builderMgr,
      //   //     describe: data.describe
      //   //   };
      //   // });
      //   return marker;
      // },

      // setZoom
      setCenter(lng, lat,id) {
        this.value = id
        // this.map.setCenter([lng, lat]); //设置地图中心点
        this.map.centerAndZoom(new T.LngLat(lng, lat), 12.5);
      }
    },
    watch: {
      search: {
        handler: function(val) {
          if (val) {
            console.log(val);
            let arr = [];
            this.mapList.map((item, key) => {
              if (item.name.indexOf(val) >= 0) {
                arr.push(item);
              }
            });
            console.log("didiid", arr);
            this.searchList = arr;
          } else {
            this.getBridgeAll();
          }
        }
      },
      $route: {
        handler(val, oldVal) {
          if (val.path !== "/") {
            this.drawer = false;
          }
        },
        // 深度观察监听
        deep: true,
        immediate: true
      },
      value: {
        handler(val){
          this.bridgeId = val
          this.getVideo(val)
        },
        deep: true,
        // immediate: true
      }
    },

  };
</script>

<style lang="scss" scoped>
  /deep/.el-pager li{
    background: transparent !important
  }
  /deep/.el-pagination .btn-next, .el-pagination .btn-prev{
    background: transparent !important
  }
  /deep/.el-pagination button:disabled{
    background-color: transparent !important
  }
  /deep/.el-pagination .btn-prev{
    background: transparent !important
  }
  .fy{
    text-align: center;
    margin-top: 5px;
  }

  // 阴影容器
  .box-left {
    position: fixed;
    left: -10px;
    top: 0;
    height: 100%;
    width: 10px;
    box-shadow: 10px 0px 180px 250px rgba(12, 23, 31, 8) !important;
    z-index: 9999 !important;
  }

  .box-top {
    position: fixed;
    top: -10px;
    width: 100%;
    height: 10px;
    box-shadow: 0px 10px 100px 60px rgba(12, 23, 31, 8) !important;
    z-index: 9999 !important;
  }

  .box-right {
    position: fixed;
    right: -10px;
    top: 0;
    width: 10px;
    height: 100%;
    box-shadow: 0px 10px 180px 250px rgba(12, 23, 31, 8) !important;
    z-index: 9999 !important;
  }

  .box-bottom {
    position: fixed;
    bottom: -10px;
    width: 100%;
    height: 10px;
    box-shadow: 0px 10px 110px 160px rgba(12, 23, 31, 8) !important;
    z-index: 9999 !important;
  }

  .bigHeader {
    width: 100%;
    height: 90px;
    background: url("../../assets/images/homeMap/header1.png") no-repeat;
    background-size: 100% 100%;
    //position: fixed;
    top: 0;
    z-index: 9999 !important;
    text-align: center;

    position: absolute;
    .map-header-front{
      position: relative;
      display: flow;
      left: -550px;
      top: 25px;
    }
    .bigHeader-content {
      width: 360px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      display: flex;
      justify-content: start;
      padding-top: 20px;
      box-sizing: border-box;
      cursor: pointer;
      #warning {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        // background: #244257;
        margin-right: 15px;
        text-align: center;
        img {
          width: 50%;
          margin-top: 9px;
          margin-left: 9px;
        }
      }
      .isShowWarning {
        background: #03b3ed;
      }
      .noShowWarning {
        background: #244257;
      }
      .person {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #244257;
        text-align: center;
        z-index: 99999 !important;
        img {
          width: 100%;
          border-radius: 50%;
          // margin-top: 6px;
          // margin-left: 9px;
        }
        .logout {
          width: 78px;
          height: 38;
          text-align: center;
          color: #d4e4f6;
          display: none;
        }
      }

      .person:hover {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #244257;
        text-align: center;
        img {
          width: 100%;
          border-radius: 50%;
        }
        .logout {
          width: 78px;
          height: 68px;
          text-align: center;
          color: #d4e4f6;
          display: block;
          line-height: 30px;
          padding-top: 8px;
          z-index: 99999 !important;
          position: fixed;
          span {
            display: inline-block;
            width: 100%;
            height: 38px;
            background: #04598a;
            border: 1px solid #2082b1;
            margin-top: 10px;
            line-height: 38px;
            z-index: 99999 !important;
          }
        }

        .logout:before {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          top: 3px;
          left: 8px;
          padding: 0;
          border-bottom: 8px solid #1f86b7;
          border-top: 8px solid transparent;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          display: block;
          content: "";
        }
        .logout:after {
          box-sizing: content-box;
          width: 0px;
          height: 0px;
          position: absolute;
          top: 3px;
          left: 7px;
          padding: 0;
          border-bottom: 9px solid #04598a;
          border-top: 9px solid transparent;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          display: block;
          content: "";
        }
      }

      .userName {
        line-height: 35px;
        margin-left: 10px;
        color: #8caec3;
        white-space: nowrap
      }
      .btn {
        width: 78px;
        height: 30px;
        border: 1px solid #388dbc;
        background: #26506a;
        margin-left: 12px;
        margin-top: 3px;
        color: #8caec3;
        text-align: center;
        line-height: 30px;
      }
      .btn-bighome {
        margin-left: 18px;
      }
      .btn-bighome:hover {
        color: #fff;
        margin-left: 18px;
      }
      .btn-system:hover {
        color: #fff;
      }
    }
  }

  /deep/.vx-card__body {
    width: 100%;
    height: 100%;
    padding: 0 !important;
  }
  .content {
    position: relative;
    .map_box {
      width: 100%;
      height: 100vh;
      background: white;
      // margin-top: 20px;
    }
    .search_box {
      width: 280px;
      // height: 364px;
      // background: white;
      position: absolute;
      top: 90px;
      left: 10px;
      z-index: 9999 !important;
      background: url("../../assets/images/homeMap/search.png") no-repeat;
      background-size: 100% auto;
      .initBtn {
        width: 78px;
        height: 28px;
        border: 1px solid #2286b5;
        text-align: center;
        line-height: 28px;
        margin-top: 20px;
        margin-bottom: 8px;
        position: relative;
        left: 200px;
        color: #c7dcf5;
        cursor: pointer;
      }
    }
    /deep/.el-input__inner {
      border-radius: 0px;
      // margin-bottom: 4px;
    }
    /deep/.el-input__icon {
      font-size: 18px;
    }
  }
  .indexHome {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0;
    z-index: 51002 !important;
  }
  /deep/.amap-maptype-win {
    background: transparent !important;
    border: none !important;
    img {
      display: none !important;
    }
  }
  /deep/.amap-maptype-con {
    width: 30px !important;
    height: 30px !important;
    border: none !important;
    background-color: transparent !important;
    img {
      width: 100% !important;
      height: 100% !important;
    }
  }
  /deep/.amap-maptype-title:hover {
    background-color: #fff !important;
    color: #327bdc !important;
  }
  /deep/.amap-maptype-title {
    position: absolute !important;
    bottom: -8px !important;
    left: -46px !important;
    color: #858899 !important;
    font-size: 14px !important;
  }
  /deep/.amap-maptype-list {
    display: none !important;
  }
  .views {
    position: fixed;
    right: 30px;
    top: 110px;
    height: 30px;
    display: flex;
    justify-content: start;
    line-height: 30px;
    z-index: 9999 !important;
    .all {
      cursor: pointer;
      width: 78px;
      height: 100%;
      background: rgba(39, 59, 76, 0.8);
      color: #e1eeff;
      border: 1px solid #105e8b;
      text-align: center;
      img {
        display: inline;
        vertical-align: middle;
        width: 16px;
        margin-right: 5px;
        margin-left: 5px;
      }
    }

    .allType {
      cursor: pointer;
      width: 120px;
      height: 100%;
      background: transparent;
      // color: #fff;
      // text-align: center;
      padding: 0 15px;
      img {
        display: inline;
        vertical-align: middle;
      }
    }
    .allType:hover {
      color: #327bdc;
    }
  }
  .allCharts {
    position: fixed;
    right: 0px;
    top: 160px;
    background: rgba(0, 0, 0, 0.2);
    width: 305px;
    height: auto;
    // min-height: 400px;
    max-height: calc(100vh - 170px);
    padding: 0 10px;
    z-index: 9999 !important;
    .title {
      width: 100%;
      border-bottom: 1px solid #eaebec;
      line-height: 40px;
      color: #4a8be0;
      img {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -2px;
        left: -5px;
      }
      span {
        position: relative;
        left: -3px;
      }
    }
  }
  .close {
    float: right;
    margin-top: 14px;
    cursor: pointer;
  }
  .container-charts {
    width: 100%;
    max-height: calc(100vh - 270px);
    overflow-x: hidden;
  }
  .active {
    background: linear-gradient(0deg, #0376b4 0%, #005089 100%) !important;
  }
  .selectBridge {
    margin-top: 20px;
  }
  #id_test_video {
    margin-top: 20px;
  }

  /deep/.el-input__inner {
    background: rgba(255, 255, 255, 0) !important;
    border: none !important;
    color: #dcddde;
  }
  /deep/input::-webkit-input-placeholder {
    color: #858899;
  }
  /deep/input::-moz-input-placeholder {
    color: #858899;
  }
  /deep/input::-ms-input-placeholder {
    color: #858899;
  }

  .drawer {
    width: 6px;
    background: #165264;
    position: fixed;
    left: 15px;
    z-index: 9999 !important;
    margin-top: 200px;
    height: calc(100vh - 300px);
    img {
      margin-top: calc((100vh - 330px) / 2);
      margin-left: 20px;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }
  }
  /deep/.el-button {
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(220, 223, 230, 0);
    color: rgba(195, 222, 255, 1);
  }
  /deep/.el-button--primary {
    background: linear-gradient(0deg, #0376b4 0%, #005089 100%);
    opacity: 0.76;
    color: rgba(195, 222, 255, 1);
  }

  .warning-container {
    width: 400px;
    height: 135px;
    overflow: auto;
    border: 1px solid #5b9abb;
    background: linear-gradient(0deg, #0c5377 0%, #0b354a 100%);
    opacity: 0.76;
    position: fixed;
    z-index: 50008;
    right: 156px;
    top: 74px;
    .WCtitle {
      width: 100%;
      height: 42px;
      border-bottom: 1px solid #1f4655;
    }
    .line-title {
      display: flex;
      justify-content: space-between;
      padding: 5px 5px;
      span {
        color: #fff;
        font-size: 26px;
        position: relative;
        top: -10px;
        cursor: pointer;
      }
      .warnign-tip {
        height: 26px;
      }
    }
  }

  .table-header{
    display: flex;
    padding: 0 10px;
    color: #B8DBF2;
    font-size: 12px;
    span{
      flex: 1;
      transform: scale(0.9);
    }
  }
  .table-line{
    display: flex;
    padding: 0 10px;
    color: #FFF;
    font-size: 12px;
    span{
      transform: scale(0.85);
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

  }
</style>

<style>
  .TLabel_D {
    color: #fff;
  }
  .TLable-top_D {
    border-bottom: 1px solid rgba(161, 202, 253, 0.3);
    padding: 0;
    height: 24px;
  }
  .TLabel-name_D {
    text-align: center;
    position: relative;
    top: -5px;
    font-weight: bold !important;
    color: #ffffff;

    background: linear-gradient(0deg, #ff0000 0%, #ffffff 80.8349609375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .roadType_D {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("../../assets/images/homeMap/城市地址.png") no-repeat center;
    background-size: 100%;
  }
  .typeName_D {
    position: relative;
    top: -3px;
    margin-left: 3px;
    font-size: 12px;
  }

  .TLabel {
    color: #fff;
  }
  .TLable-top {
    border-bottom: 1px solid rgba(161, 202, 253, 0.3);
    padding: 0;
    height: 24px;
  }
  .TLabel-name {
    text-align: center;
    position: relative;
    top: -5px;
    font-weight: bold !important;
    color: #ffffff;
    background: linear-gradient(
      0deg,
      #0075af 0%,
      #d8f1fd 65.7958984375%,
      #d8f1fd 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .roadType {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("../../assets/images/homeMap/roadType.png") no-repeat center;
    background-size: 100%;
  }
  .typeName {
    position: relative;
    top: -3px;
    margin-left: 3px;
    font-size: 12px;
  }
  .tdt-label {
    width: 84px;
    height: 45px;
    background: rgba(7, 20, 28, 0.8);
    border-radius: 3px;
    border: none;
  }

  .warningList-container {
    width: 100%;
    height: 95px;
    position: relative;
    top: -18px;
    overflow: auto;
  }

  /* 覆盖滚动条样式 css */
  .warningList-container::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  .warningList-container::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  .warningList-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  /* 覆盖滚动条样式 css */
  ::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
  }
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  .vvv{
    width: 311px;
    height: 255px;
    background:#000;
  }
  .header-title{
    font-size: 24px;
    margin-top: 1px;
    letter-spacing: 2px;
    background: linear-gradient(
      0deg,
      #0075af 0%,
      #d8f1fd 65.7958984375%,
      #d8f1fd 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .fy{
    text-align: center
  }


</style>
